<template>
<div class="container">
  <div class="operation">
    <div class="title">{{label}}</div>
    <div>
      <el-button type="primary" v-if="pageType==2 && showApprovalNew" @click="createApproval">提交新增审核</el-button>
      <template v-if="[3,4,5,9].indexOf(pageType) != -1">
        <el-button type="primary" @click="approvalPass">审核通过</el-button>
        <el-button v-if="pageType == 9" type="danger" @click="approvalBack">审核驳回</el-button>
        <el-button v-else type="danger" @click="approvalBackReasonVisible = true">审核驳回</el-button>
      </template>
      <template v-else>
        <el-button v-if="canEdit || showEditBtn" type="primary" @click="handleSubmit">{{saveBtnTitle}}</el-button>
      </template>
      <el-button @click="editBack">返回</el-button>
    </div>
  </div>
  <template v-if="pageType==5">
    <el-table :data="updateData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
      <template v-for="(item, index) of updateHeaders">
        <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
          <template slot-scope="scope">
            <el-button @click="removeBind(scope.row)" slot="reference" type="primary" plain size="small"></el-button>
          </template>
        </el-table-column>
        <el-table-column fixed v-else align='center' :key="index" :prop="item.prop" :label="item.label" :width="item.width">
        </el-table-column>
      </template>
    </el-table>
  </template>
  <el-form class="form" ref="form" :model="formData" label-width="160px" size="small" status-icon>
    <el-form-item class="form-item" v-for="(item, index) of conItems" :label="item.name" :key="index" :required="item.required">
      <!-- 单个输入 -->
      <el-input :disabled="!canEdit || item.disable" v-if="item.type == 'text'" v-model="formData[item.key]" :placeholder="item.placeholder"></el-input>
      <!-- 一行多个输入 -->
      <el-row v-if="item.type=='multi-text'">
        <el-col :span="textItem.span" v-for="(textItem,index) of item.texts" :key="index">
          <el-input :disabled="!canEdit || textItem.disable" :placeholder="textItem.placeholder" v-model="formData[textItem.key]">
            <template v-if="textItem.name" slot="append">{{textItem.name}}</template>
          </el-input>
        </el-col>
      </el-row>
      <!-- 搜索的输入框 -->
      <el-input v-if="item.type=='search'" :disabled="!canEdit || item.disable" readonly :placeholder="item.placeholder" v-model="formData[item.key]">
        <el-button v-if="canEdit && !item.disable" slot="append" icon="el-icon-search" @click="search(item)"></el-button>
      </el-input>
      <el-input type="textarea" :disabled="!canEdit || item.disable" v-if="item.type == 'textarea'" v-model="formData[item.key]" :placeholder="item.placeholder"></el-input>
      <!-- 带checkbox输入 -->
      <el-row v-if="item.type=='checktext'" type="flex" justify="space-between" style="width: 100%;">
        <el-col :span="11">
          <el-input :disabled="!canEdit || item.disable || formData[item.key + 'Checked']" v-model="formData[item.key]" :placeholder="item.placeholder"></el-input>
        </el-col>
        <el-col v-if="canEdit && !item.disable" :span="12">
          <el-checkbox :disabled="!canEdit || item.disable" v-model="formData[item.key + 'Checked']" :checked="formData[item.key + 'Checked']" :label="item.checkname" name="type"></el-checkbox>
        </el-col>
      </el-row>
      <!-- 单选 -->
      <el-select loading-text="加载中" :disabled="!canEdit || item.disable" class="single" v-if="item.type == 'single-select'" v-model="formData[item.key]" @change="((el)=>{selectChange(el,item.key)})" placeholder="请选择" @focus="getSelectOption(item)">
        <el-option v-for="(option, index) of item.options" :key="index" :label="option.name" :value="option.value"></el-option>
      </el-select>
      <!-- 一行多个选择 -->
      <div v-if="item.type=='multi-select'" style="display: flex; flex-direction:row; width: 100%;flex-wrap: wrap;">
        <template v-for="(options, index) of item.optionss">
          <div style="width: 115px;display: flex;">
            <el-select style="width: 85px;" loading-text="加载中" :disabled="!canEdit || item.disable || options.disable" class="single" v-model="formData[options.key]" @change="((el)=>{selectChange(el,options.key)})" placeholder="请选择" @focus="getSelectOption(options)">
              <el-option v-for="(option, index) of options.options" :key="index" :label="option.name" :value="option.value"></el-option>
            </el-select>
            <div style="width: 30px;">{{['省', '市', '区县'][index]}}</div>
          </div>
        </template>
      </div>
      <!-- checkbox -->
      <el-checkbox :disabled="!canEdit || item.disable" name="type" v-if="item.type=='checkbox'" v-model="formData[item.key]" :checked="formData[item.key] == 1 || formData[item.key] == true"></el-checkbox>
    </el-form-item>
    <!-- 备注 -->
    <el-form-item v-if="pageType == 2" style="width: 100%;" class="form-item" label="备注">
      <el-input type="textarea" v-model="formData.memo"></el-input>
    </el-form-item>
    <el-divider class="divider"></el-divider>
    <el-row v-if="pageType==2" style="font-size: 15px;font-weight: 500; margin-top: 10px">
      【客户名称】{{formData.smmsName}}【客户地址】{{formData.province}}，{{formData.physicalCity}}，{{formData.adminCity}}，{{formData.deAddress}}
    </el-row>
    <template v-if="hasTable">
      <el-row style="width: 100%; padding: 20px;padding-bottom: 0;">
        <el-radio-group v-model="tabIdx" size="small" @change="loadSubData">
          <el-radio-button v-for="(item, index) of tabItems" :key="index" :label="pageType == 2 || pageType == 3 || pageType == 4?index-1:index">{{item}}</el-radio-button>
        </el-radio-group>
      </el-row>
      <div style="padding: 5px; border: 1px solid #b0b0b0; width: 100%; display: flex; flex-wrap: wrap; flex-direction: row;">
      <el-table v-if="tabIdx==0 && pageType==7" :data="sapCombineData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
        <template v-for="(item, index) of sapCombineHeaders">
          <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
            <template slot-scope="scope">
              <el-popconfirm v-if="scope.row.isSettings == 1" confirmButtonText='确定' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="'确定要【移除设定】吗？'" @onConfirm="removeSetting(scope.row)">
                <el-button slot="reference" type="primary" plain size="small">移除设定</el-button>
              </el-popconfirm>
              <el-popconfirm v-if="scope.row.isRelated == 1" confirmButtonText='确定' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="'确定要【移除合并】吗？'" @onConfirm="removeRelated(scope.row)">
                <el-button slot="reference" type="primary" plain size="small">移除合并</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
          <el-table-column v-if="item.prop!='operate'" fixed align='center' :key="index" :prop="item.prop" :label="item.label"
            :min-width="getMaxLength(sapCombineData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(sapCombineData, item.prop)">
          </el-table-column>
        </template>
      </el-table>
      <!-- SAP客户信息 -->
      <template v-if="tabIdx==0 && pageType==8">
        <div style="width: 100%">
          <el-button style="margin: 0 0 15px 20px;" type="primary" size="small" plain @click="createCombine">新增</el-button>
          <el-table ref="sapTable" :data="sapData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of sapHeaders">
              <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
                <template slot-scope="scope">
                  <el-popconfirm v-if="scope.row.isSettings == 1" confirmButtonText='确定' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="'确定要【移除设定】吗？'" @onConfirm="removeSetting(scope.row)">
                    <el-button slot="reference" type="primary" plain size="small">移除设定</el-button>
                  </el-popconfirm>
                  <el-popconfirm v-if="scope.row.isRelated == 1" confirmButtonText='确定' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="'确定要【移除关联】吗？'" @onConfirm="removeRelated(scope.row)">
                    <el-button slot="reference" type="primary" plain size="small">移除关联</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
              <template v-else>
                <el-table-column v-if="item.prop!='operate' && index != 1" fixed align='center' :key="index" :prop="item.prop" :label="item.label"
                                  :min-width="getMaxLength(sapData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(sapData, item.prop)">
                </el-table-column>
                <el-table-column class-name="click-able" v-else fixed align='center' :key="index" :prop="item.prop" :label="item.label"
                                  :min-width="getMaxLength(sapData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(sapData, item.prop)">
                </el-table-column>
              </template>
            </template>
          </el-table>
        </div>
      </template>
      <template v-if="pageType!=7 && pageType!=8">
          <!-- 匹配结果 -->
          <el-table v-if="tabIdx==-1" :data="ppData" border stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of ppHeaders">
              <el-table-column v-if="item.prop=='operate' && pageType == 2" fixed="right" align='center' label="操作">
                <template slot-scope="scope">
                  <el-popconfirm confirmButtonText='确定' cancelButtonText='不用了' icon="el-icon-info" iconColor="red" title="'确定要【关联】吗？'" @onConfirm="bind(scope.row)">
                    <el-button slot="reference" type="primary" plain size="small">关联</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
              <el-table-column v-if="!(pageType == 2 && (item.prop=='operate' || item.prop=='pkid' || item.prop==''))" fixed align='center' :key="index" :prop="item.prop" :label="item.label"
                              :min-width="getMaxLength(ppData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(ppData, item.prop)">
              </el-table-column>
            </template>
          </el-table>
          <!-- SAP基础信息 -->
          <template v-if="tabIdx==0">
            <el-form-item class="form-item" v-if="pageType == 6" label="付款用Vendor">
              <el-input :disabled="!canEdit" readonly v-model="formData['vendorCode']">
                <el-button v-if="canEdit" slot="append" icon="el-icon-search" @click="search({key: 'vendorCode'})"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item v-else class="form-item" label="付款用Vendor">
              <el-input disabled v-model="formData['vendorCode']" placeholder=""></el-input>
            </el-form-item>
            <el-form-item class="form-item" label="DistributionChannel">
              <el-input :disabled="pageType != 6" v-model="formData.fkDistributionChannel" placeholder=""></el-input>
            </el-form-item>
            <!-- 搜索的输入框 -->
            <el-form-item class="form-item" label="PayLink编码">
              <el-input :disabled="!canEdit" readonly v-model="formData.payLinkCode">
                <el-button v-if="canEdit" slot="append" icon="el-icon-search" @click="search({key: 'payLinkCode'})"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item class="form-item" label="PayLink名称">
              <el-input disabled v-model="formData.payLinkName" placeholder=""></el-input>
            </el-form-item>
          </template>
          <el-table v-if="tabIdx== 1" :data="shipToData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of shipToHeaders">
              <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
                <template slot-scope="scope">
                  <el-button @click="removeBind(scope.row)" slot="reference" type="primary" plain size="small"></el-button>
                </template>
              </el-table-column>
              <el-table-column fixed v-else align='center' :key="index" :prop="item.prop" :label="item.label"
                              :min-width="getMaxLength(shipToData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(shipToData, item.prop)">
              </el-table-column>
            </template>
          </el-table>
          <el-table v-if="tabIdx== 2" :data="payerData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of playerHeaders">
              <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
                <template slot-scope="scope">
                  <el-button slot="reference" type="primary" plain @click="removeBind(scope.row)" size="small"></el-button>
                </template>
              </el-table-column>
              <el-table-column fixed v-else align='center' :key="index" :prop="item.prop" :label="item.label"
                                :min-width="getMaxLength(payerData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(payerData, item.prop)">
              </el-table-column>
            </template>
          </el-table>
          <el-table v-if="tabIdx== 3" :data="oriCustomerData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of oriCustomerHeaders">
              <el-table-column v-if="item.prop=='operate'" fixed="right" align='center' label="操作">
                <template slot-scope="scope" v-if="scope.row.fkSmmsDealer && scope.row.fkSmmsDealer > 0">
                  <el-button v-if="scope.row.isRelated == 1" @click.native.prevent="removeBind(scope.row)" slot="reference" type="primary" plain size="small">移除关联</el-button>
                </template>
              </el-table-column>
              <template v-else>
                <el-table-column v-if="item.prop!='operate' && index != 1" fixed align='center' :key="index" :prop="item.prop" :label="item.label"
                :min-width="getMaxLength(oriCustomerData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(oriCustomerData, item.prop)">
                </el-table-column>
                <el-table-column class-name="click-able" v-else fixed align='center' :key="index" :prop="item.prop" :label="item.label"
                :min-width="getMaxLength(oriCustomerData, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(oriCustomerData, item.prop)">
                </el-table-column>
              </template>
            </template>
          </el-table>
          <el-table v-if="tabIdx== 4" :data="logData" border style="width: 100%" stripe header-cell-class-name="table-head-cell" cell-class-name="table-cell-class" highlight-current-row @cell-click="cellClick">
            <template v-for="(item, index) of logHeaders">
              <el-table-column fixed align='center' :key="index" :prop="item.prop" :label="item.label" :width="item.width">
              </el-table-column>
            </template>
          </el-table>
      </template>
      <el-pagination v-if="tabIdx==-1 && pageType != 7 && pageType != 8"
      style="width: 100%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[15, 30, 45, 60]"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper , sizes">
      </el-pagination>
    </div>
    </template>
  </el-form>
  <CommonSubEdit v-if="showCreate" label="供货经销商 - 添加" @getSelectOption="getSelectOption" @search="search" :items="createItems" @close="closeSubEdit" @submit="saveProvide"/>
  <CommonSubEdit id="sap" v-if="showSAP" :label="subEditTitle" :disabled="subDisabled" :originalData="sapEditData" :tabItems="subEditTabItems" @getSelectOption="getSelectOption" @search="search" :items="sapEditItems" @close="closeSAPEdit" @submit="saveSAP"/>
  <el-dialog title="驳回理由" :visible.sync="approvalBackReasonVisible" :modal-append-to-body='false'>
    <el-input type="textarea" autocomplete="off" v-model="approvalBackReason" placeholder="请输入驳回理由"/>
    <div slot="footer" class="dialog-footer">
      <el-button @click="approvalBackReasonVisible = false">取 消</el-button>
      <el-button type="primary" @click="approvalBack">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import http from '@/api/http'
import Tools from "@/util/Tools.js";
import {Message} from 'element-ui'
import CommonSubEdit from '../../common/CommonSubEdit'
export default {
  name: 'CustomerEdit',
  components: { CommonSubEdit },
  data() {
    return {
      approvalBackReason: '',
      approvalBackReasonVisible: false,
      showApprovalNew: false,
      canEdit: !this.disabled,
      saveBtnTitle: '',
      subEditTabItems: [],
      subDisabled: false,
      subEditTitle: '',
      tabIdx: this.pageType == 2 || this.pageType == 3 || this.pageType == 4?-1:0,
      formData: this.originalData ? this.originalData : {},
      pageSize: 15,
      page: 1,
      tabItems: (this.pageType == 1 || this.pageType == 6 || this.pageType == 5 || this.pageType == -3) ? ['SAP基础信息', 'ShipTo信息', 'Payer信息', '原始客户信息', '变更日志'] : ((this.pageType == 2 || this.pageType == 3 || this.pageType == 4)?['匹配结果','SAP基础信息', 'ShipTo信息', 'Payer信息']:(this.pageType==8?['SAP客户信息']:(this.pageType==7?['SAP客户变更']:['SAP基础信息', 'ShipTo信息', 'Payer信息']))),
      sapEditData: null,
      showSAP: false,
      showCreate: false,
      sapData:[],
      sapHeaders:[{
        prop: 'smmsCode',
        label: '统一编码'
      },{
        prop: 'soldToCode',
        label: 'SoldTo编码'
      },{
        prop: 'smmsName',
        label: '客户名称'
      },{
        prop: 'buName',
        label: '业务单位'
      },{
        prop: 'brandName',
        label: '适用品牌'
      },{
        prop: 'repName',
        label: '客户负责人'
      },{
        prop: 'customNameCn',
        label: '客户集团'
      },{
        prop: 'salesOffice',
        label: 'SalesOffice'
      },{
        prop: 'operate',
        label: '操作'
      },],
      sapCombineData:[],
      sapCombineHeaders:[{
        prop: 'logTime',
        label: 'SoldTo编码'
      },{
        prop: 'logTime',
        label: '客户名称'
      },{
        prop: 'buName',
        label: '业务单位'
      },{
        prop: 'logTime',
        label: '适用品牌'
      },{
        prop: 'logTime',
        label: '客户负责人'
      },{
        prop: 'logTime',
        label: '客户集团'
      },{
        prop: 'logTime',
        label: 'SalesOffice'
      },{
        prop: 'operate',
        label: '操作'
      }],
      updateData: [],
      updateHeaders:[{
        prop: 'logTime',
        label: '变更日期',
        width: '170'
      }, {
        prop: 'chineseName',
        label: '变更申请人',
        width: '100'
      }, {
        prop: 'logInfo',
        label: '变更描述',
      }, {
        prop: 'status',
        label: '变更状态',
        width: '100'
      }, {
        prop: 'modifyTime',
        label: '变更审核时间',
        width: '170'
      }],
      ppHeaders:[{
        prop: 'pkid',
        label: 'ID'
      },{
        prop: 'smmsCode',
        label: '统一编码'
      },{
        prop: 'soldToCode',
        label: '客户编码'
      },{
        prop: 'smmsName',
        label: '客户名称'
      },{
        prop: 'updateAddress',
        label: '详细地址'
      },{
        prop: 'customNameCn',
        label: '客户集团'
      },{
        prop: 'levelName',
        label: '客户分类'
      },{
        prop: 'relationStatus',
        label: '关联状态'
      },{
        prop: 'radio1',
        label: '客户名称匹配度'
      },{
        prop: 'radio2',
        label: '地址匹配度'
      },{
        prop: 'radio',
        label: '相似度得分'
      },{
        prop: 'operate',
        label: '操作'
      }],
      shipToHeaders: [{
        prop: 'shipToCode',
        label: 'ShipTo代码'
      }, {
        prop: 'shipToName',
        label: 'SoldTo名称'
      }, {
        prop: 'shipToAddress',
        label: 'SoldTo地址'
      }, {
        prop: 'memo',
        label: '备注'
      }, {
        prop: 'isValid',
        label: '是否有效'
      }, {
        prop: 'createUserName',
        label: '创建人'
      }, {
        prop: 'createTime',
        label: '创建时间'
      }],
      playerHeaders: [{
        prop: 'payerCode',
        label: 'Player代码'
      }, {
        prop: 'payerName',
        label: 'Player名称'
      }, {
        prop: 'payerAddress',
        label: 'Player地址'
      }, {
        prop: 'memo',
        label: '备注'
      }, {
        prop: 'isValid',
        label: '是否有效'
      }, {
        prop: 'createUserName',
        label: '创建人'
      }, {
        prop: 'createTime',
        label: '创建时间'
      }],
      oriCustomerHeaders: [{
          prop: 'dataSource',
          label: '数据来源'
        },
        {
          prop: 'soldToCode',
          label: '客户编码'
        },
        {
          prop: 'smmsName',
          label: '客户名称'
        },
        {
          prop: 'levelName',
          label: '客户属性'
        },
        {
          prop: 'repName',
          label: '客户负责人'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
        {
          prop: 'modifyTime',
          label: '最后修改时间'
        },
        {
          prop: 'operate',
          label: '操作'
        }
      ],
      logHeaders: [{
        prop: 'logTime',
        label: '变更提交时间',
        width: '170',
      }, {
        prop: 'chineseName',
        label: '变更人',
        width: '100',
      }, {
        prop: 'status',
        label: '变更状态',
        width: '100',
      }, {
        prop: 'modifyTime',
        label: '变更确认时间',
        width: '170',
      }, {
        prop: 'logInfo',
        label: '变更描述'
      }],
      ppData: [],
      shipToData: [],
      payerData: [],
      oriCustomerData: [],
      logData: [],
      conItems: this.items,
      createData: {},
      createItems: [{
        name: 'SoldTo编码',
        key: 'soldToCode',
        type: 'search',
        required: true,
        disable: false,
      },{
          name: '统一编码',
          key: 'smmsCode',
          type: 'text',
          disable: true,
          required: true
        },
        {
          name: '客户名称',
          key: 'smmsName',
          type: 'text',
          disable: true,
          required: true
        },{
          name: '业务单位',
          key: 'buName',
          vkey: 'fkBu',
          type: 'single-select',
          required: false,
          disable: true,
          options: []
        },{
          name: '适用品牌',
          key: 'brandName',
          vkey: 'fkBrand',
          type: 'single-select',
          required: true,
          disable: true,
          options: []
        },{
          name: '客户负责人',
          key: 'repName',
          type: 'search',
          required: true,
          disable: true
        },
        {
          name: '适用品牌',
          key: 'brandName',
          vkey: 'fkBrand',
          type: 'single-select',
          required: true,
          disable: true,
          options: []
        },
        {
            name: 'SalesOffice',
            key: 'salesOffice',
            type: 'text',
            disable: true,
            required: false
        }],
        sapEditItems:[
        {
            name: '统一编码',
            key: 'smmsCode',
            type: 'text',
            disable: true,
            required: true,
            placeholder: ''
          },
          {
            name: '客户属性',
            key: 'levelName',
            vkey: 'fkDealerLevel',
            type: 'single-select',
            required: true,
            disable: true,
            options: []
          },
          {
            name: 'SoldToCode(客户编码)',
            key: 'soldToCode',
            type: 'text',
            required: true,
            disable: true,
            placeholder: '',
            checkname: ''
          },
          {
            name: '客户名称',
            key: 'smmsName',
            type: 'text',
            placeholder: '',
            required: true,
            disable: true,
          },
          {
            name: '地理城市',
            key: 'city',
            type: 'multi-select',
            required: true,
            optionss: [{
              options: [],
              key: 'province'
            }, {
              options: [],
              key: 'physicalCity'
            }, {
              options: [],
              key: 'adminCity'
            }]
          },
          {
            name: '城市类别',
            key: 'cityTypeName',
            vkey: 'fkCityType',
            type: 'single-select',
            required: false,
            disable: true,
            options: []
          },
          {
            name: '详细地址',
            key: 'deAddress',
            type: 'multi-text',
            required: false,
            texts: [{
              key: 'address',
              name: '街道',
              span: 12
            }, {
              key: 'address1',
              name: '路',
              span: 12
            }, {
              key: 'address2',
              name: null,
              span: 24
            }]
          },
          {
            name: '客户负责人',
            key: 'repName',
            type: 'search',
            required: true,
            disable: false
          },
          {
            name: '关联供货方',
            key: 'smmsOwnerName',
            type: 'search',
            required: false,
            disable: true
          },
          {
            name: '供货方代码',
            key: 'smmsSoldToCode',
            type: 'text',
            required: false,
            disable: true
          },
          {
            name: '业务单位',
            key: 'buName',
            vkey: 'fkBu',
            type: 'single-select',
            required: false,
            disable: true,
            options: []
          },
          {
            name: '客户集团',
            key: 'customNameCn',
            type: 'search',
            required: true,
            disable: true
          },
          {
            name: '适用品牌',
            key: 'brandName',
            vkey: 'fkBrand',
            type: 'single-select',
            required: true,
            disable: true,
            options: []
          },
          {
            name: 'Destination',
            key: 'destinationName',
            vkey: 'fkDestination',
            type: 'single-select',
            required: false,
            disable: false,
            options: []
          },
          {
            name: '客户联系人',
            key: 'linkMan',
            type: 'text',
            placeholder: ''
          },
          {
            name: '联系人手机',
            key: 'linkPhone',
            type: 'text',
            placeholder: ''
          },
          {
            name: '邮箱地址',
            key: 'linkEmail',
            type: 'text',
            placeholder: '多个邮箱请用英文,(逗号分割)'
          },
          {
            name: '申请费用状态',
            key: 'tPFeeStatus',
            type: 'single-select',
            required: true,
            disable: false,
            options: []
          },
          {
            name: '客户营业状态',
            key: 'businessStatus',
            type: 'single-select',
            disable: false,
            required: true,
            options: []
          },
          {
            name: '合作状态',
            key: 'cooperationStatus',
            type: 'single-select',
            disable: false,
            options: []
          },
          {
            name: '申请费用状态',
            key: 'tpFeeStatus',
            type: 'single-select',
            disable: true,
            options: []
          },
          {
            name: 'TPWF客户编码',
            key: 'tpCode',
            type: 'text',
            required: false,
            disable: true
          }
        ]
    }
  },
  props: {
    pageType: Number, //页面类型【0:新增-非SAP客户 1:变更-非SAP客户 2:非SAP客户待处理 3:非SAP客户新增审批 4:非SAP客户关联审批 5:非SAP客户变更审批 6:变更-SAP客户 7:任务-SAP客户待处理 8:任务-SAP客户合并】
    disabled: Boolean, // 是否不可编辑
    showEditBtn: Boolean,
    hasTable: {
      type: Boolean,
      default() {
        return true
      }
    },
    originalData: {
      type: Object,
      default () {
        return null
      }
    },
    label: {
      type: String,
      default: ''
    },
    items: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    selectChange(itemId, key) {
      for (let idx in this.conItems) {
        let item = this.items[idx]
        if (item.type == 'single-select' || item.type == 'multi-select') {
          if (item.key == 'city') {
            if (key == 'province') {
              this.formData.physicalCity = null
              this.formData.adminCity = null
              this.formData.fkCityType = null
              item.optionss[1].options = []
              item.optionss[2].options = []
            } else if (key == 'physicalCity') {
              item.optionss[2].options = []
              this.formData.adminCity = null
              this.formData.fkCityType = null
            }
          } else if (item.key == key) {
            this.formData[item.vkey] = itemId
          }
        } else {
          continue
        }
      }
      if (key == 'adminCity') {
        let item = this.$select
        if (item) {
          for (let idx in item.options) {
            let option = item.options[idx]
            if (option.adminCity == itemId) {
              let data = Object.assign({}, this.formData)
              data.fkAdminCity = option.fkAdminCity
              data.fkCityType = option.fkCityType
              data.cityTypeName = option.cityTypeName
              this.formData = data
              break;
            }
          }
        }
      }
      if (key == 'levelName' && (this.pageType == 0 || this.pageType == 2)) {
        if (itemId == 2) {
          this.conItems[11].disable = true
          this.formData.customNameCn = null
          this.formData.fkCustom = null
          this.formData = Object.assign({}, this.formData)
        } else {
          this.conItems[11].disable = false
        }
      }
   },
    /* 获取选择器选项，由宿主组件提供数据 */
    getSelectOption(item, formData) {
      if (!formData) {
        this.$select = item
        formData = this.formData
      }
      // 第二个参数用于级联
      this.$emit('getSelectOption', item, formData)
    },
    handleSubmit() {
      // 保存
      this.$emit('submit', this.formData)
    },
    search(item, callback) {
      console.log(callback)
      if (!callback) {
        callback = (obj) => {
          // 已绑定的对象不允许动态添加属性，添加了也不会生成setter和getter
          let data = Object.assign({}, this.formData)
          data = Object.assign(data, obj)
          this.formData = data
        }
      }
      this.$emit('search', item, callback)
    },
    editBack() {
      this.$emit('editBack')
    },
    removeBind(item) {
      // 移除关联的原始客户信息
      http.post(this.$api.API_SMMS_ORIGINAL_REMOVE_RELATION, {originalPkid: item.pkid})
          .then(resp=>{
            this.loadSubData(this.tabIdx)
            Message({type: 'success', message: '已移除关联！'})
          })
      /* this.$emit('removeBind', item) */
    },
    bind(item) {
      // 关联客户信息
      http.post(this.$api.API_SMMS_NOSAP_MATCH_RELATE, {matchPkid: item.pkid, pkid: this.formData.pkid, smmsCode: this.formData.smmsCode})
          .then(resp=>{
            this.loadSubData(this.tabIdx)
            Message({type: 'success', message: '关联成功！'})
          })

      // this.$emit('bind', item)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.loadSubData(-1)
    },
    handleCurrentChange(page) {
      this.page = page
      this.loadSubData(-1)
    },
    createCombine() {
        // 新增SAP客户
        this.showCreate = true
    },
    closeSubEdit() {
      this.showCreate = false
    },
    closeSAPEdit() {
      this.showSAP = false
      this.sapEditData = null
    },
    saveProvide(formData) {
      formData.pageType = this.pageType
      http.post(this.$api.API_SMMS_DEALER_COMBINE_SAP_CREATE, {pkid: this.formData.pkid, sapPkid: formData.pkid, smmsCode: formData.smmsCode})
          .then(resp=>{
            this.showCreate = false
            Message({type: 'success', message: 'SAP客户新增成功！'})
            http.get(this.$api.API_SMMS_ORI_DEALER_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
                .then(resp=>{
                  this.sapData = resp
                })
            })
    },
    saveSAP(item) {
      item.pageType = this.pageType
      // 编辑
      http.post(this.$api.API_SMMS_UPDATE_LIST, item)
          .then(resp=>{
        Message({type: 'success',message: '保存成功'});
        this.showSAP = false
        this.sapEditData = null
        http.get(this.$api.API_SMMS_ORI_DEALER_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
            .then(resp=>{
              this.sapData = resp
            })
      })
    },
    approvalPass() {
      // 审核通过
      this.$emit('approvalPass', this.formData)
    },
    approvalBack() {
      this.approvalBackReasonVisible = false
      // 审核驳回
      this.$emit('approvalBack', this.formData, this.approvalBackReason)
    },
    removeSetting(item) {
      http.post(this.$api.API_SMMS_DEALER_SAP_SETTINGS_REMOVE,{sapPkid: item.pkid})
          .then(resp=>{
            Message({type: 'success', message: '已移除设定'})
            this.loadSubData(this.tabIdx)
            /* if  (this.pageType == 7) {
              http.get(this.$api.API_SMMS_SAP_COMBINE_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
                  .then(resp=>{
                    this.sapData = resp
                  })
            } else if (this.pageType == 8) {
              http.get(this.$api.API_SMMS_ORI_DEALER_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
                  .then(resp=>{
                    this.sapData = resp
                  })
            } */
          })
    },
    removeRelated(item) {
      if (this.pageType == 7) {
        http.post(this.$api.API_SMMS_DEALER_SAP_COMBINE_REMOVE,{sapPkid: item.pkid, pageType: this.pageType})
            .then(resp=>{
              Message({type: 'success', message: '已移除合并'})
              this.loadSubData(this.tabIdx)
              // this.editBack()
              /* http.get(this.$api.API_SMMS_SAP_COMBINE_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
                  .then(resp=>{
                    this.sapData = resp
                  }) */
            })
      } else if (this.pageType == 8) {
        http.post(this.$api.API_SMMS_DEALER_SAP_RELATED_REMOVE,{sapPkid: item.pkid, pageType: this.pageType})
            .then(resp=>{
              Message({type: 'success', message: '已移除关联'})
              this.loadSubData(this.tabIdx)
              // this.editBack()
              /* http.get(this.$api.API_SMMS_ORI_DEALER_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
                  .then(resp=>{
                    this.sapData = resp
                  }) */
            })
      }
    },
    cellClick(row, column) {
      if (this.pageType == 8 && column.property == 'soldToCode') {
        this.sapEditData = row
        this.subDisabled = false
        this.showSAP = true
        this.subEditTitle = '编辑SAP客户信息'
        this.subEditTabItems = []
      } else if(this.tabIdx == 3 && this.tabItems[this.tabIdx] == '原始客户信息' && column.property == 'soldToCode') {
        this.sapEditData = row
        this.subDisabled = true
        this.subEditTitle = '原始客户信息查看'
        this.subEditTabItems = [{
          name: 'SAP基础数据',
          showPage: true,
          type: 'text',
          texts: [{
            label: '付款用Vendor',
            type: 'search',
            key: 'vendorCode',
            disable: true,
          },{
            label: 'DistributionChannel',
            type: 'text',
            key: 'distributionChannel',
            disable: true,
          },{
            label: 'PayLink编码',
            type: 'search',
            key: 'payLinkCode',
            disable: true,
          },{
            label: 'PayLink名称',
            type: 'text',
            key: 'payLinkName',
            disable: true,
          }]
        }, {
          name: 'ShipTo信息',
          showPage: true,
          type: 'table',
          url: this.$api.API_SMMS_SHIPTO_LIST,
          headers: [{
            prop: 'shipToCode',
            label: 'ShipTo代码'
          }, {
            prop: 'shipToName',
            label: 'SoldTo名称'
          }, {
            prop: 'shipToAddress',
            label: 'SoldTo地址'
          }, {
            prop: 'memo',
            label: '备注'
          }, {
            prop: 'isValid',
            label: '是否有效'
          }, {
            prop: 'fkCreateUser',
            label: '创建人'
          }, {
            prop: 'createTime',
            label: '创建时间'
          }],
          data: []
        },{
          name: 'Payer信息',
          type: 'table',
          showPage: true,
          url:this.$api.API_SMMS_PLAYER_LIST,
          data: [],
          headers: [{
            prop: 'payerCode',
            label: 'Payer代码'
          }, {
            prop: 'payerName',
            label: 'Payer名称'
          }, {
            prop: 'payerAddress',
            label: 'Payer地址'
          }, {
            prop: 'memo',
            label: '备注'
          }, {
            prop: 'isValid',
            label: '是否有效'
          }, {
            prop: 'createUserName',
            label: '创建人'
          }, {
            prop: 'createTime',
            label: '创建时间'
          }]
        }]
        this.showSAP = true
        if (this.pageType == -3) {
          this.sapEditItems = [
          {
              name: '统一编码',
              key: 'smmsCode',
              type: 'text',
              disable: true,
              required: true,
              placeholder: ''
            },
            {
              name: '客户属性',
              key: 'levelName',
              vkey: 'fkDealerLevel',
              type: 'single-select',
              required: true,
              disable: true,
              options: []
            },
            {
              name: 'SoldToCode(客户编码)',
              key: 'soldToCode',
              type: 'text',
              required: true,
              disable: true,
              placeholder: '',
              checkname: ''
            },
            {
              name: '客户名称',
              key: 'smmsName',
              type: 'text',
              placeholder: '',
              required: true,
              disable: true,
            },
            {
              name: '地理城市',
              key: 'city',
              type: 'multi-select',
              required: true,
              optionss: [{
                options: [],
                key: 'province'
              }, {
                options: [],
                key: 'physicalCity'
              }, {
                options: [],
                key: 'adminCity'
              }]
            },
            {
              name: '城市类别',
              key: 'cityTypeName',
              vkey: 'fkCityType',
              type: 'single-select',
              required: false,
              disable: true,
              options: []
            },
            {
              name: '详细地址',
              key: 'deAddress',
              type: 'multi-text',
              required: false,
              texts: [{
                key: 'address',
                name: '街道',
                span: 12
              }, {
                key: 'address1',
                name: '路',
                span: 12
              }, {
                key: 'address2',
                name: null,
                span: 24
              }]
            },
            {
              name: '客户负责人',
              key: 'repName',
              type: 'search',
              required: true,
              disable: false
            },
            {
              name: '关联供货方',
              key: 'smmsOwnerName',
              type: 'search',
              required: false,
              disable: true
            },
            {
              name: '供货方代码',
              key: 'smmsSoldToCode',
              type: 'text',
              required: false,
              disable: true
            },
            {
              name: '业务单位',
              key: 'buName',
              vkey: 'fkBu',
              type: 'single-select',
              required: false,
              disable: true,
              options: []
            },
            {
              name: '客户集团',
              key: 'customNameCn',
              type: 'search',
              required: true,
              disable: true
            },
            {
              name: '适用品牌',
              key: 'brandName',
              vkey: 'fkBrand',
              type: 'single-select',
              required: true,
              disable: true,
              options: []
            },
            {
              name: 'Destination',
              key: 'destinationName',
              vkey: 'fkDestination',
              type: 'single-select',
              required: false,
              disable: false,
              options: []
            },
            {
              name: '客户联系人',
              key: 'linkMan',
              type: 'text',
              placeholder: ''
            },
            {
              name: '联系人手机',
              key: 'linkPhone',
              type: 'text',
              placeholder: ''
            },
            {
              name: '邮箱地址',
              key: 'linkEmail',
              type: 'text',
              placeholder: '多个邮箱请用英文,(逗号分割)'
            },
            {
              name: '申请费用状态',
              key: 'tpFeeStatus',
              type: 'single-select',
              disable: true,
              options: []
            },
            {
              name: '客户营业状态',
              key: 'businessStatus',
              type: 'single-select',
              disable: false,
              required: true,
              options: []
            },
            {
              name: '合作状态',
              key: 'cooperationStatus',
              type: 'single-select',
              disable: false,
              options: []
            },
            {
              name: 'TPWF客户编码',
              key: 'tpCode',
              type: 'text',
              required: false,
              disable: true
            },
            {
              name: 'JDES Code',
              key: 'jdesCode',
              type: 'text',
              required: false,
              disable: true
            },
          ]
        }
      }
    },
    createApproval() {
      http.post(this.$api.API_SMMS_NOSAP_APPROVAL_CREATE, {pkid: this.originalData.pkid})
          .then(resp=>{
            Message({type: 'success', message: '提交成功!'})
            this.loadSubData(this.tabIdx)
            this.editBack()
          })
    },
    getMaxLength(arr, key) {
    return arr.reduce((acc, item) => {
      if (item[key]) {
        const str = item[key].toString()
        const upLetter = str.match(/[A-Z]/g)
        const upLetterLen = upLetter ? upLetter.length : 0
        const lowLetter = str.match(/[a-z]/g)
        const lowLetterLen = lowLetter ? lowLetter.length : 0
        const char = str.match(/[\u2E80-\u9FFF]/g)
        const charLen = char ? char.length - upLetterLen - lowLetterLen : 0
        const num = str.match(/\d|\./g)
        const numLen = num ? num.length : 0
        const otherLen = str.length - upLetterLen - lowLetterLen - charLen - numLen
        let calcLen = charLen * 1.0 + upLetterLen * 0.65 + numLen * 0.55 + lowLetterLen * 0.48 + otherLen * 0.8
        if (acc < calcLen) {
          acc = calcLen
        }
        console.log(acc)
      }
      return acc
    }, 0) * 13 + 20
  },
    loadSubData(index) {
      if (this.originalData) {
        if (index == -1) {
          let params = Object.assign({pageNum: this.page, pageSize: this.pageSize, pn: this.page, ps:this.pageSize}, this.originalData)
          http.get(this.$api.API_SMMS_MATCHRESULT_LIST, params).then(resp => {
            if (resp instanceof Array) {
              this.ppData = resp
            } else {
              this.ppData = resp.list
            }
            console.log(resp)
          }, msg => {})
        } else if (index == 1) {
          // ShipTo信息
          http.get(this.$api.API_SMMS_SHIPTO_LIST, {
            pkid: this.originalData.pkid
          }).then(resp => {
            if (resp instanceof Array) {
              this.shipToData = resp
            } else {
              this.shipToData = resp.list
            }
            console.log(resp)
          }, msg => {})
        } else if (index == 2) {
          // Player信息
          http.get(this.$api.API_SMMS_PLAYER_LIST, {
            pkid: this.originalData.pkid
          }).then(resp => {
            if (resp instanceof Array) {
              this.payerData = resp
            } else {
              this.payerData = resp.list
            }
            console.log(resp)
          }, msg => {})
        } else if (index == 3) {
          // 原始客户信息
          http.get(this.$api.API_SMMS_ORI_DEALER_LIST, {
            pkid: this.originalData.pkid
          }).then(resp => {
            if (resp instanceof Array) {
              this.oriCustomerData = resp
            } else {
              this.oriCustomerData = resp.list
            }
            console.log(resp)
          }, msg => {})
        } else if (index == 4) {
          // 变更日志
          http.get(this.$api.API_SMMS_DEALER_LOG_LIST, {
            pkid: this.originalData.pkid
          }).then(resp => {
            if (resp instanceof Array) {
              this.logData = resp
            } else {
              this.logData = resp.list
            }
            console.log(resp)
          }, msg => {})
        }
      }
    },
  },
  watch: {
    formData: {
      deep: true,
      handler(newValue, oldValue, a) {
        if (this.pageType == 6 && newValue.soldToCode != newValue.tpCode) { // 变更 - SAP客户
          this.$set(newValue, 'tpCode', newValue.soldToCode)
        }
      }
    }
  },
  created() {
    if (this.originalData) {
      this.formData.province = this.formData.province == "0" || this.formData.province == 0 ? "":this.formData.province
      this.formData.physicalCity = this.formData.physicalCity == "0" || this.formData.physicalCity == 0 ? "":this.formData.physicalCity
      this.formData.adminCity = this.formData.adminCity == "0" || this.formData.adminCity == 0 ? "":this.formData.adminCity
    } else {
      let data = {}
      for (let idx in this.conItems) {
        let item = this.items[idx]
        if (item.type == 'multi-select') {
          item.optionss.forEach(item=>{
            data[item.key] = null
          })
        } else if (item.type == 'multi-text') {
          item.texts.forEach(item=>{
            data[item.key] = null
          })
        } else {
          data[item.key] = null
        }
      }
      if (this.pageType == 6) {
        data.fkOwner = 1
        data.smmsOwnerName = "JNJ"
        data.smmsSoldToCode = "JNJ"
        data.smmsOwnerCode = "JNJ"
      }
      console.log(this.pageType)
      this.formData = data
    }
    if (this.formData.fkVendor) {
      Tools.getVendor({fkVendor: this.formData.fkVendor}, resp=>{
        if (resp) {
          let data = Object.assign({}, this.formData)
          data.vendorCode = resp.vendorCode
          data.fkVendor = resp.pkid
          this.formData = data
        }
      })
    }
    if (this.formData.fkPayLink) {
      Tools.getPaylink({fkPayLink: this.formData.fkPayLink}, resp=>{
        let data = Object.assign({}, this.formData)
        data.payLinkName = resp.payLinkName
        data.payLinkCode = resp.payLinkCode
        data.fkVendor = resp.pkid
        this.formData = data
      })
    }
    if (this.formData.fkAdminCity) {
      Tools.getAdminCityInfo({fkAdminCity: this.formData.fkAdminCity}, resp=>{
        let data = Object.assign({}, this.formData)
        data.cityTypeName = resp.cityTypeName
        data.fkCityType = resp.fkCityType
        data.adminCity = resp.adminCity
        this.formData = data
      })
    }
    this.saveBtnTitle = "保存"
    if (this.pageType==5) {
      http.get(this.$api.API_SMMS_NOSAP_LOGIN_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
          .then(resp=>{
            this.updateData = resp
          })
    } else if (this.pageType==7) {
        http.get(this.$api.API_SMMS_DEALER_DEAL_BUTTON, {pkid: this.formData.pkid, pageType: this.pageType})
            .then(resp=>{
              if (resp.isAdd == 1) {
                this.saveBtnTitle = '确认新增'
                this.tabItems = ['SAP客户合并']
              } else if (resp.isMerge == 1) {
                this.saveBtnTitle = '确认合并'
              }
            })
        http.get(this.$api.API_SMMS_SAP_COMBINE_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
            .then(resp=>{
              this.sapCombineData = resp
            })
    } else if (this.pageType==8) {
        this.saveBtnTitle = "确认合并"
        http.get(this.$api.API_SMMS_ORI_DEALER_LIST,{pkid:this.formData.pkid, pageType: this.pageType})
            .then(resp=>{
              console.log(resp)
              this.sapData = resp
              if (this.$refs.sapTable && resp.length > 0) {
                this.$refs.sapTable.setCurrentRow(resp[0])
              }
            })
    }
    if (!this.canEdit && this.showEditBtn) {
      this.saveBtnTitle = '编辑'
    }
    this.loadSubData(this.tabIdx)
    if (this.pageType==2 && this.originalData && this.originalData.fkAdminCity > 0) {
      this.showApprovalNew = true
    }
    // 设置默认显示
    Tools.getBussinessStatus(data=>{
      if (!this.formData.businessStatus) {
        this.formData.businessStatus = data[0].dkey
        this.formData = Object.assign({}, this.formData)
      } else {
        let items = data.filter(item => item.dkey == this.formData.businessStatus)
        if (items.length <= 0) {
          this.formData.businessStatus = data[0].dkey
          this.formData = Object.assign({}, this.formData)
        }
      }
    })
    Tools.getCooperationStatus(data=>{
      if (!this.formData.cooperationStatus) {
        this.formData.cooperationStatus = data[0].dkey
        this.formData = Object.assign({}, this.formData)
      } else {
        let items = data.filter(item => item.dkey == this.formData.cooperationStatus)
        if (items.length <= 0) {
          this.formData.cooperationStatus = data[0].dkey
          this.formData = Object.assign({}, this.formData)
        }
      }
    })
    Tools.getBuList(data=>{
      let items = data.filter(item => item.pkid == this.formData.fkBu)
      if (items.length <= 0) {
        this.formData.buName = null
        this.formData.fkBu = null
      }
    })
  },
  mounted () {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.editBack, false)
    }
  },
  destroyed () {
    window.removeEventListener('popstate', this.editBack, false)
  },
}
</script>

<style lang="less" scoped>
.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: white;
    z-index: 99;
    padding-bottom: 50px;
}
.title {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
}
.operation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}
.form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid #f2f2f2;
}
.form-item {
    width: calc(50% - 10px);
    margin: 5px 5px;
}
/deep/.el-form-item__label {
    font-size: 12px;
    text-align: center;
}
/deep/.el-select.single {
    width: 100%;
}

.main {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.main .alert {
  position: relative;
  display: block;
  width: 50%;
  height: 60%;
  background: white;
  overflow: scroll;
}
.main .title {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
}
.main .operation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}
.main .form-item {
  border: 1px solid #f4f4f4;
}
.main .close {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: red;
}

.table-head-cell {
  padding: 5px 0 !important;
  color: #000000! important;
  font-weight: 400;
  font-size: 12px !important;
}

.table-cell-class {
  padding: 5px 0 !important;
  color: #000000;
  font-weight: 400;
  font-size: 12px !important;
}
.el-table th.is-hidden>* {
  visibility: visible! important;
}
/deep/tbody .click-able {
  color: blue;
  font-weight: bold;
  cursor: pointer;
}

.el-table .cell {
  white-space: pre-line;
}

.divider {
  margin: 0;
}

/deep/.el-input.is-disabled .el-input__inner {
  cursor: text! important;
}

/deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 0! important;
}

/deep/.el-form-item--small .el-form-item__label {
  height: 100%;
  padding: 0;
  margin-right: 5px;
  background: #f1f1f1;
  border: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.el-form-item--small .el-form-item__content {
  padding: 10px 10px;
  border: 1px solid #e7e7e7;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

/deep/.el-radio-button {
  margin-left: 5px;
}
/deep/.el-radio-button:first-child {
  margin-left: 0;
}
/deep/.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0;
}

/deep/.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
}

/deep/.el-radio-button__inner {
  border-left: 1px solid #DCDFE6;
  font-weight: 600;
}

/deep/.el-input.is-disabled .el-input__inner {
  color: #606266;
}

</style>
